<template>
  <div id="detail">
    <detail-nav-bar
      class="detail-nav"
      :scroll="this.$refs.scroll"
      :scrollList="scrollList"
    ></detail-nav-bar>
    <scroll class="content" ref="scroll">
      <detail-swiper :topImages="topImages"></detail-swiper>
      <detail-base-info :baseInfo="baseInfo"></detail-base-info>
      <detail-shop-info :shopInfo="shopInfo"></detail-shop-info>
      <detail-goods-info
        :goodsInfo="detailInfo"
        @imageLoadOk="imageLoadOk"
      ></detail-goods-info>
      <detail-size ref="detailSize" :sizeInfo="SizeInfo"></detail-size>
      <detail-comment-info
        ref="commemtInfo"
        :commemtInfo="commemtInfo"
      ></detail-comment-info>
      <h4 class="recommend" ref="recommend">相关推荐</h4>
    <!-- 推荐商品数据列表 -->
      <goods-list :goods="goodsInfoList" :isDetailMsg="false"></goods-list>
    </scroll>
    <toast ref="toast"></toast>

    <back-top v-if="-position > 500" @click.native="backClick"></back-top>

    <detail-bottom-tab @addCart="addCart"></detail-bottom-tab>
  </div>
</template>

<script>
import DetailNavBar from "./childComps/DetailNavBar.vue";

import {
  BaseInfo,
  getdetailData,
  ShopInfo,
  SizeInfo,
  getDetailsGoodsList,
} from "../../network/detail";

import DetailSwiper from "./childComps/DetailSwiper.vue";

import DetailShopInfo from "./childComps/DetailShopInfo.vue";
import DetailBaseInfo from "./childComps/detailBaseInfo.vue";
import Scroll from "../../components/common/scroll/scroll.vue";
import DetailGoodsInfo from "./childComps/DetailGoodsInfo.vue";
import DetailSize from "./childComps/DetailSize.vue";
import DetailBottomTab from "./childComps/DetailBottomTab.vue";
import DetailCommentInfo from "./childComps/DetailCommentInfo.vue";
import GoodsList from "../../components/content/goods/GoodsList.vue";
import BackTop from "../../components/content/backTop/BackTop.vue";
import Toast from '../../components/common/toast/Toast.vue';

export default {
  components: {
    DetailNavBar,
    DetailSwiper,
    DetailShopInfo,
    DetailBaseInfo,
    Scroll,
    DetailGoodsInfo,
    DetailSize,
    DetailBottomTab,
    DetailCommentInfo,
    GoodsList,
    BackTop,
    Toast,
  },
  name: "DetailPages",
  methods: {
    imageLoadOk() {
      this.$refs.scroll.refresh();
    },
    backClick() {
      this.$refs.scroll.toTop(0, 0, 500);
    },
    //添加物品到购物车
    addCart() {
      const shopInfo = {};
      shopInfo.image = this.topImages[0];
      shopInfo.title = this.baseInfo.title;
      shopInfo.desc = this.baseInfo.desc;
      shopInfo.price = this.baseInfo.NowPrice;
      shopInfo.iid = this.iid;
      shopInfo.checked = true;
      this.$store.dispatch("addCart", shopInfo).then((res) => {
        this.$refs.toast.show(res);
      });
    },
  },
  data() {
    return {
      iid: null,
      topImages: [],
      shopInfo: {},
      baseInfo: {},
      detailInfo: {},
      SizeInfo: {},
      commemtInfo: {},
      goodsInfoList: [],
      scrollList: [],
      position: 0,
    };
  },
  created() {
    this.iid = this.$route.params.iid;
    //获取轮播图信息
    getdetailData(this.iid).then((res) => {
      // console.log(res.data.result);
      this.topImages = res.data.result.itemInfo.topImages;
      var data = res.data.result;
      this.baseInfo = new BaseInfo(
        data.itemInfo,
        data.shopInfo.services,
        data.columns
      );
      this.detailInfo = data.detailInfo;
      //获取商家信息
      this.shopInfo = new ShopInfo(data.shopInfo);

      //获取参数信息
      this.SizeInfo = new SizeInfo(data.itemParams, data.itemParams.rule);
      if (data.rate.cRate !== 0) this.commemtInfo = data.rate;
      // console.log(data);
      // 推荐其它商品列表
      getDetailsGoodsList().then((res) => {
        //  获取商品列表数据
        this.goodsInfoList = res.data.data.list;
      });
    });
  },
  mounted() {
    this.$refs.scroll.scroll.on("scroll", (position) => {
      this.position = position.y;
    });

    setTimeout(() => {
      this.scrollList.push(0);
      this.scrollList.push(this.$refs.detailSize.$el.offsetTop);
      this.scrollList.push(this.$refs.commemtInfo.$el.offsetTop);
      this.scrollList.push(this.$refs.recommend.offsetTop);
    }, 1000);
  },
};
</script>
<style scoped>
.detail-nav {
  position: relative;
  z-index: 9;
  background: #fff;
}

#detail {
  height: 100vh;
}
.recommend {
  margin: 20px;
  font-weight: 300;
  font-size: 20px;
}
.content {
  /* 方法一 */
  height: calc(100% - 93px);
}
</style>